<template>
	<view class="tabbar">
		<view class="li" v-for="(item,index) in tabBarList" :key="index" @click="tabbarClick(item,index)">
			<image :class="['image',tabBarList.length == 5 && index == 2?'image-radius':'']"
				:src="current == index?item.selectedIconPath:item.iconPath"></image>
			<view :class="['li-text',current == index?'li-text-select':'']">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				badgeStyles: {
					top: 0,
					right: '8px'
				}
			};
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
				shopCartNumber: state => state.shopCart.shopCartNumber,
				isSettings: state => state.init.isSettings,
				subTemplateIds: state => state.init.subTemplateIds,
				tabBarList: state => state.tabbar.tabBarList,
				current: state => state.tabbar.current
			})
		},
		methods: {
			...mapMutations('tabbar', ['setCurrent']),
			tabbarClick(item, index) {
				this.setCurrent(index)
				this.$switchTab(item.pagePath)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 140rpx;
		z-index: 9999;

		.li {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			padding: 20rpx 0 40rpx;
		}

		.image {
			width: 38rpx;
			height: 38rpx;
			display: block;
		}

		.image-radius {
			width: 58rpx;
			height: 58rpx;
			display: block;
			border-radius: 50%;
		}

		.li-text {
			font-size: 24rpx;
			color: #606266;
			padding-top: 6rpx;
		}

		.li-text-select {
			color: $base-color;
		}
	}
</style>